<template>
	<h5 class="middle_title">{{ title }}</h5>
	<div class="hot_pic">
		<div class="hot_pic_item" v-for="item in contentList">
			<a class="block_a" :href="getImgPath(item?.url)" target="_blank">
				<div class="img_box"><img class="hot_img_box img_pic" :src="getImgPath(item.headImag)" /></div>
				<h6 class="title_description p_descripte">{{ item.title }}</h6>
			</a>
		</div>
	</div>
</template>

<script>
	export default {
		props:['title'],
		data(){
			return{
				contentList: [],
				Path: getRootPath(),
			}
		},
		mounted(){
			this.getContentOfChannel();
		},
		methods:{
			getContentOfChannel() {
				let param = {
					pageNum: 1,
					pageSize: 8,
					typeIdStr: 1302,
				};
				contentApi.fetchContentOfChannel(param, res => {
					if (res.code == '00000 00000') {
						this.contentList = res.data.records;
					} else {
					}
				});
			},
			getImgPath(url){
				console.log(url, 'item.headImag')
				return imgPath(url);
			},
		}
	}
</script>

<style>
	.middle_title {
	  font-size: 20px;
	  font-family: PingFang SC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #E8E8E8;
	  line-height: 20px;
	  margin-bottom: 24px;
	  width: 100%;
	}
	.hot_pic {
	  width: 100%;
	  display: flex;
	  flex-wrap: wrap;
	}
	.hot_pic .hot_pic_item {
	  margin-right: 16px;
	  margin-bottom: 24px;
	  width: 158px;
	}
	.hot_pic .hot_pic_item .img_box {
	  width: 100%;
	  height: 89px;
	  margin-bottom: 16px;
	  border-radius: 2px;
	  overflow: hidden;
	}
	.hot_pic .hot_pic_item .img_box .hot_img_box {
	  width: 100%;
	}
	.hot_pic .hot_pic_item .title_description {
	  font-size: 14px;
	  font-family: PingFang SC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #E8E8E8;
	  line-height: 22px;
	  display: -webkit-box;
	  text-overflow: ellipsis;
	  overflow: hidden;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	}
	.hot_pic .hot_pic_item:nth-of-type(2n) {
	  margin-right: 0;
	}

</style>
